<template>
  <div class="fl" style="width: auto" >
    <div :id="cid">
      <svg :viewBox="`0 0 ${width} ${height}`">
        <g v-for="(d,index) of tiles" :key="index">
          <path fill="#eee" :d="`${path(filter(d.data.water, d => !d.properties.boundary))}`"></path>
          <path fill="none" stroke="#aaa" :d="`${path(filter(d.data.water, d => d.properties.boundary))}`"></path>
          <path fill="none" stroke="#000" stroke-width="0.75" :d="`${path(d.data.roads)}`"></path>
        </g>
      </svg>
    </div>
    <strong>没有加载任何</strong>
  </div>
</template>

<script>
//``````````````````````````没有有效数据

import * as d3 from 'd3';
import 'd3-tile'
import 'd3-geo'
// import tiles from '../data/tiles.json'

export default {
  name: "WorldAirportsVoronoi",
  props:['cid'],
  data(){
    return {
      width: 1000,
      height:600,
      tiles:[]
    }
  },
  beforeCreate() {
    let width= 1000,
        height=600;
    let path = d3.geoPath(projection);
    this.path = path;
    let projection = d3.geoMercator()
        .center([-122.4183, 37.7750])
        .scale(Math.pow(2, 21) / (2 * Math.PI))
        .translate([width / 2, height / 2])
    let tile = d3.tile()
        .size([width, height])
        .scale(projection.scale() * 2 * Math.PI)
        .translate(projection([0, 0]))

    window.console.log(tile)

    let tiles = Promise.all(tile().map(async d => {
      d.data = await fetch(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d[2]}/${d[0]}/${d[1]}.json?api_key=SAI-dMzMQ866u3VyVAntDg`).then(response => response.json()); // Sign up for an API key: https://www.nextzen.org
      return d;
    }))
    window.console.log(tiles)

  },
  mounted() {
    // this.draw()
    window.console.log(this.tiles)
  },
  methods:{
    path:function (){

    },
    filter({features}, test) {
      return {type: "FeatureCollection", features: features.filter(test)};
    },
    draw(){
    }
  }
}
</script>

<style scoped>

</style>